<!--
 * @Author: your name
 * @Date: 2021-12-15 07:33:23
 * @LastEditTime: 2021-12-15 21:18:16
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \day7\my-app\src\views\Home.vue
-->
<template>
  <div class="home">
    <Header name="饿了么"></Header>
    <div class="nav">
      <router-link v-for="item,index in navList" :key="index" :to="`/home/${item.path}`">{{item.meta.title}}</router-link>
    </div>
    <div class="main">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
import Header from "../components/Header"
export default {
  components: {
    Header
  },
  data() {
    return {
      navList: [
        {
          path: "oreder",
          name: "Oreder",
          meta: {
            title: "点餐",
          },
          component: () => import("../views/Home/Oreder.vue"),
        },
        {
          path: "evaluate",
          name: "Evaluate",
          meta: {
            title: "评价",
          },
          component: () => import("../views/Home/Evaluate.vue"),
        },
        {
          path: "merchant",
          name: "Merchant",
          meta: {
            title: "商家",
          },
          component: () => import("../views/Home/Merchant.vue"),
        },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
.home{
  width: 100%;
  height: calc(100vh - 40px);
  .nav{
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    a{
      color: #000;
    }
    .router-link-active{
      color: red;
    }
  }
  .main{
    width: 100%;
    height: calc(100vh - 80px);
    overflow-y: scroll;
  }
  .main::-webkit-scrollbar{
    display: none;
  }
}
</style>
